<template>
    <el-dialog v-model="store.state.homeview.officialsTabVisible" title="请输入工作人员信息">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
            <!-- 内部人员专用表 -->
            <el-form-item label="员工ID" prop="workerid">
                <el-input v-model="ruleForm.workerid" type="string" autocomplete="off" />
            </el-form-item>
            <el-form-item label="员工名称" prop="name">
                <el-input v-model="ruleForm.name" type="string" autocomplete="off" />
            </el-form-item>
            <el-form-item label="员工种类" prop="categary">
                <el-input v-model="ruleForm.categary" type="string" autocomplete="off" :disabled="true"/>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" type="string" autocomplete="off" />
            </el-form-item>
            <el-form-item label="负责场地" prop="place">
                <el-input v-model="ruleForm.place" type="string" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { useStore } from "vuex"
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import link from "@/util/api";
const store = useStore()
const ruleFormRef = ref<FormInstance>()

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === "") {
    callback(new Error("内容不能为空"));
  }  else {
    callback();
  }
}
const ruleForm = reactive({
    //员工ID
    workerid:'',
    //员工名称
    name:'',
    //员工种类
    categary:'内部工作人员',
    //用户名
    username:'',
    //负责场地
    place:''
})
//制订验证规则
const rules = reactive<FormRules>({
    userName: [{ validator: validatePass, trigger: 'blur' }],
})


//提交表单
const submitForm = (formEl: FormInstance | undefined) => {   
    //到时候发送网络请求进行更改
    store.commit('SET_TABDIALOG')
    link(`/insertWorker`,"post",'',{
        ruleForm
    }).then(ok=>{
          console.log(ok)
    })
}
//重置表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields()
}
</script>